<template>
  <!-- <view class="num-box" style="width: 250rpx;"> -->
    <up-number-box v-model="innerValue" :min="props.min" :max="props.max" :integer="props.integer"
      :inputWidth="props.inputWidth" inputBgColor="#fff" :decimalLength="decimalLength" :asyncChange="props.asyncChange"
      @change="onChange">
      <template #minus>
        <view class="minus">
          <up-icon name="minus" size="14" />
        </view>
      </template>
      <template #plus>
        <view class="plus">
          <up-icon name="plus" color="#FFFFFF" size="14" />
        </view>
      </template>
    </up-number-box>
  <!-- </view> -->
</template>
<script setup>
import { ref, watch } from 'vue';
const props = defineProps({
  value: { type: [Number, String], default: 0 }, // 支持 v-model
  min: { type: [Number, String], default: 0 },
  max: { type: [Number, String], default: 999999 },
  integer: { type: Boolean, default: false },
  decimalLength: { type: [Number, String], default: 2 },
  inputWidth: { type: String, default: "100" },
  asyncChange: { type: Boolean, default: false }
})


const emit = defineEmits(['change', 'update:modelValue']);
const innerValue = ref(props.modelValue);
watch(innerValue, (val) => {
  emit('update:modelValue', val)
});
function onChange(e) {
  // 把 change 事件抛出去，让父组件接收
  emit("change", e);
}
</script>
<style lang="scss">
  .minus {
    width: 20px;
    height: 20px;
    border-width: 1px;
    border-color: #e6e6e6;
    border-style: solid;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    @include flex;
    justify-content: center;
    align-items: center;
  }

  .input {
    &::v-deep .uni-input-input {
      text-align: center;
    }
  }

  .plus {
    width: 20px;
    height: 20px;
    background-color: #ff0000;
    border-radius: 50%;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    justify-content: center;
    align-items: center;
  }
</style>